<template>
    <div>
        <h1>value is : {{sum}}</h1>
        <!-- <select v-model="n">
            <option :value="1" >1</option>
            不能写成value，因为会当成字符串处理
            <option :value="2" >2</option>
            <option :value="3" >3</option>
        </select> -->
        <!-- 或者使用v-model修饰符 -->
        <select v-model.number="n">
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
        </select>
        <button @click="increase">+</button>
        <button @click="decrease">-</button>
        <button @click="increaseOdd">value是奇数再加</button>
        <button @click="increaseWait">等1s再加</button>
    </div>
</template>

<script>
    export default {
        name : "Count",
        data(){
            return {
                sum:0,
                n:1,
            }
        },
        methods:{
            increase(){
                this.sum += this.n
            },
            decrease(){
                this.sum -= this.n
            },
            increaseOdd(){
                if(this.n%2){
                    this.sum += this.n
                }
            },
            increaseWait(){
                setTimeout(() => {
                    this.sum += this.n
                }, 1000);
            },
        }
    }
</script>

<style scoped>
    button{
        margin : 5px;
    }
    select{
        margin : 5px;
    }
</style>